<template>
  <div class="itemselect">
    <div class="header">
      <div class="header-top">
        <h3 class="title1"><van-icon class="aaa" name="arrow-left" @click="back" />商品详情</h3>
      </div>
      <img :src="item.small_image" alt="">
    </div>
    <div class="main">
      <h3>{{item.name}}</h3>
      <p class="spec">{{item.spec}}</p>
      <div class="price"><p>￥{{item.price}} <span>￥{{item.origin_price}}</span></p><p>已售:{{item.total_sales}}</p></div>
      <p class="spec">此商品按500g/份计价，如实收取少于500g将退还差价</p>
      <p class="spec"><van-icon name="clock-o" />最快29分钟到达</p>
    </div>
    <div class="footer">
      <van-goods-action :safe-area-inset-bottom="true">
        <van-goods-action-icon icon="chat-o" text="客服" />
       <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
        <van-goods-action-button
          type="danger"
          text="加入购物车"
          @click="onClickButton(item)"
        />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    name:"ItemSelect",
    data(){
      return {
        item:[]
      }
    },
    methods: {
    onClickIcon() {
      this.$router.push("shop");
    },
    onClickButton(val) {
      Toast('加入购物车');
      this.$store.commit("onList",val);
    },
    back(){
      this.$router.back();
    }
  },
    created() {
      this.item=this.$store.state.item;
      console.log(this.item);
    },
}
</script>

<style lang="scss">
  .itemselect{
    font-size:.16rem;
    width: 100vw;
    background:#f4f6f5;
    .header{
      // text-align:center;
      background:#fff;
      .header-top{
        h3{
          .aaa{
            margin-right:2.9rem;
            margin-left:.1rem;
          }
        }
      }
      .title1{
        font-size:.3rem;
      }
      img{
        width: 100%;
        height: 5.2rem;
      }
    }
    .main{
      background:#fff;
      padding-bottom:3rem;
      h3{
        font-size:.2rem;
        padding-left:.1rem;
        line-height:.41rem;
      }
      .spec{
        color:#a8a8a8;
        padding-left:.1rem;
        border-bottom:.02rem solid #9ea0a2;
        line-height:.61rem;
      }
      .price{
        display:flex;
        justify-content:space-between;
        border-bottom:.02rem solid #9ea0a2;
        font-size:.2rem;
        color:red;
        padding:0 .1rem;
        span{
          color:#ccc;
          text-decoration: line-through;
        }
      }
    }
    .footer{
      .van-goods-action{
        bottom:1rem;
      }
    }
  }
</style>